<template>
  <div class="sale-detail detail-dialog-contain">
    <el-dialog class="mineSetDialog dialogHeaderFont"
               title="详情"
               @close="$emit('update:showdialog', false)"
               :visible.sync="visible"
               width="60%"
               height="8vh">
      <div class="detail-dialog-content">
        <div class="detail-dialog-content-item detail-dialog-header space-between flex-container"
             style="margin-bottom: 12px;">
          <div class="detail-dialog-headerItem">
            <el-radio-group v-model="radioDetailSwitch"
                            size="small">
              <el-radio-button label="基本信息"
                               style="font-weight:bold"></el-radio-button>
              <el-radio-button label="问题反馈"
                               style="font-weight:bold"></el-radio-button>
              <el-radio-button label="销售数据/用户特征"
                               style="font-weight:bold"></el-radio-button>
              <el-radio-button label="现场信息"
                               style="font-weight:bold"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="detail-dialog-content-item whiteContainer boederSet paddingSet">
          <div class="detail-content-item basic-information"
               v-show="radioDetailSwitch == '基本信息'">
            <div class="basicInformationItem">
              <div class="flex-container lineHeight">
                <div class="titleLeft">名称:</div>
                <div v-text="saleBaseInfo.trialSalePointData ? saleBaseInfo.trialSalePointData.salePointName : ''"></div>
              </div>
              <div class="flex-container lineHeight">
                <div class="titleLeft">地点:</div>
                <div v-text="saleBaseInfo.trialSalePointData ? saleBaseInfo.trialSalePointData.areaName : ''"></div>
              </div>
              <div class="flex-container lineHeight">
                <div class="titleLeft">预期销量:</div>
                <div v-show="saleBaseInfo.trialSalePointData">
                  <span v-text="saleBaseInfo.trialSalePointData ? saleBaseInfo.trialSalePointData.planSales : ''"></span><span>件</span>
                </div>
              </div>
              <div class="flex-container lineHeight">
                <div class="titleLeft">流量:</div>
                <div v-show="saleBaseInfo.trialSalePointData">
                  <span v-text="saleBaseInfo.trialSalePointData ? saleBaseInfo.trialSalePointData.totalFlowCount : ''"></span><span>人</span>
                </div>
              </div>
            </div>
            <div class="basicInformationItem lineHeight">
              <div class="basicInfoItem"
                   style="flex-direction: column">
                <div class="titleLeft"
                     style="font-weight:bold;color:#333;">
                  客户特征:
                </div>
                <div class="contRight">
                  <div class="flex-container">
                    <div class="titleLeft">年龄:</div>
                    <div class="contRightSet flex-container">
                      <div class="contRightSetItem"
                           v-for="(item,index) in saleBaseInfo.listAgeArea"
                           :key="index"
                           style="color:#212121;">{{item.ageAreaName=='65以上'?item.ageAreaName:item.ageAreaName+'岁'}}</div>
                    </div>
                  </div>
                  <div class="flex-container">
                    <div class="titleLeft">收入:</div>
                    <div class="contRightSet flex-container">
                      <div class="contRightSetItem"
                           v-for="(item,index) in saleBaseInfo.listIcome"
                           :key="index"
                           v-text="item.icomeAreaName"
                           style="color:#212121;"></div>
                    </div>
                  </div>
                  <div class="flex-container">
                    <div class="titleLeft">性别:</div>
                    <div class="contRightSet flex-container">
                      <div class="contRightSetItem flex-container"
                           v-for="(item,index) in saleBaseInfo.listGender"
                           :key="index">
                        <div class="sexSet"
                             v-text="item.genderName"
                             style="color:#212121;"></div>
                        <div v-text="`${item.genderNumber}人`"
                             style="color:#212121;"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="basicInfoItem">
                <div class="titleLeft">
                  教育程度:
                </div>
                <div class="basicInfoContent">
                  <div class="basicInfoContentItem"
                       v-for="(item,index) in saleBaseInfo.listEducation"
                       :key="index"
                       v-text="item.educationName"
                       style="color:#212121;">
                  </div>
                </div>
              </div>
            </div>
            <div class="basicInformationItem">
              <div class="flex-container lineHeight">
                <div class="titleLeft">时间段:</div>
                <div><span v-text="saleBaseInfo.startTime"></span><span>至</span><span v-text="saleBaseInfo.endTime"></span></div>
              </div>
              <div class="lineHeight"
                   style="display: flex;">
                <div class="titleLeft"
                     style="height: 100%;">物料:</div>
                <div class="titleRight">
                  <div class="titleRightItem">
                    <div class="materielTitle">话术</div>
                    <div class="titleRightItemContainer">
                      <div class="materielItem"
                           v-text="saleBaseInfo.sellingWords">
                      </div>
                    </div>
                  </div>
                  <div class="titleRightItem">
                    <div class="materielTitle">卖点</div>
                    <div class="titleRightItemContainer">
                      <div class="materielItem"
                           v-for="(item,index) in saleBaseInfo.listSalePoint"
                           :key="index">
                        <div v-text="item"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="detail-content-item feedBack"
               v-show="radioDetailSwitch == '问题反馈'">
            <div class="feedBackItem feedBackTitle lineHeight">
              <span style="font-weight:bold;color:#333;">经销商反馈</span><span class="detailColorSet"
                    v-text="saleBackDetail.userNumber || 0"></span>
              <span style="font-weight:bold;color:#333;">条，终端客户反馈</span>
              <span class="detailColorSet"
                    v-text="saleBackDetail.customNumber || 0"></span><span style="font-weight:bold;color:#333;">条</span>
            </div>
            <div class="feedBackItem">
              <div id="feedBackItemEcharts"
                   ref="feedBackItemEcharts"
                   style="height: 300px;"></div>
            </div>
            <div class="feedBackItem feedBackItemTable">
              <div class="feedBackTableParam">
                <el-form :inline="true"
                         :model="feedBackParam"
                         class="demo-form-inline"
                         size="small">
                  <el-form-item label="反馈人群">
                    <el-select class="selectFont"
                               v-model="feedBackParam.feedbackCrowd"
                               @change="feedbackCrowdChange"
                               placeholder="反馈人群">
                      <el-option class="selectFont"
                                 label="全部"
                                 value="全部"></el-option>
                      <el-option class="selectFont"
                                 label="经销商"
                                 value="0"></el-option>
                      <el-option class="selectFont"
                                 label="终端客户"
                                 value="1"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="类型">
                    <el-select class="selectFont"
                               v-model="feedBackParam.problemType"
                               @change="problemTypeChange"
                               placeholder="类型">
                      <el-option class="selectFont"
                                 label="全部"
                                 value="全部"></el-option>
                      <el-option class="selectFont"
                                 label="性能"
                                 value="性能"></el-option>
                      <el-option class="selectFont"
                                 label="包装"
                                 value="包装"></el-option>
                      <el-option class="selectFont"
                                 label="价格"
                                 value="价格"></el-option>
                      <el-option class="selectFont"
                                 label="可获得性"
                                 value="可获得性"></el-option>
                      <el-option class="selectFont"
                                 label="保证"
                                 value="保证"></el-option>
                      <el-option class="selectFont"
                                 label="易用性"
                                 value="易用性"></el-option>
                      <el-option class="selectFont"
                                 label="生命周期"
                                 value="生命周期"></el-option>
                      <el-option class="selectFont"
                                 label="社会接受度"
                                 value="社会接受度"></el-option>
                      <el-option class="selectFont"
                                 label="其他"
                                 value="其他"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
              <div class="feedBackTableContainer">
                <el-table :data="listTrialSaleFeedback"
                          border
                          stripe
                          class="setHeight boederSet"
                          style="width: 100%">
                  <el-table-column prop="createTime"
                                   label="时间"
                                   width="160">
                  </el-table-column>
                  <el-table-column prop="name"
                                   label="反馈人群"
                                   width="100">
                    <template slot-scope="scope">
                      <span v-text="scope.row.feedbackCrowd == 0 ? '经销商' : '终端客户'"></span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="problemContent"
                                   label="问题内容"
                                   width="300">
                  </el-table-column>
                  <el-table-column prop="problemType"
                                   label="类型">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="detail-content-item salesData"
               v-show="radioDetailSwitch == '销售数据/用户特征'">
            <div class="salesDataItem salesDataTitle">
              <div class="salesDataTitleItem">
                <span style="font-weight:bold;color:#212121;">流量</span><span class="detailColorSet"
                      v-text="characterUser.flowCountTotal || 0"></span><span style="font-weight:bold;color:#212121;">人</span>
                <span style="font-weight:bold;color:#212121;">，已购人数</span><span class="detailColorSet"
                      v-text="characterUser.purchaseNumberTotal || 0"></span><span style="font-weight:bold;color:#212121;">人</span>
                <span style="font-weight:bold;color:#212121;">，未购人数</span><span class="detailColorSet"
                      v-text="characterUser.noPurchaseNumberTotal || 0"></span><span style="font-weight:bold;color:#212121;">人</span>
                <span style="font-weight:bold;color:#212121;">，销量</span><span class="detailColorSet"
                      v-text="characterUser.salesCountTotal || 0"></span><span style="font-weight:bold;color:#212121;">件</span>
              </div>
              <div class="salesDataTitleItem">
                <span v-text="characterUser.startTime || '2500-01-01'"></span><span>至</span><span v-text="characterUser.endTime || '2500-01-01'"></span>
              </div>
            </div>
            <div class="salesDataItem salesDataEcharts boederSet">
              <div class="salesEchartsIitem">
                <div id="salesEchartsAge"
                     ref="salesEchartsAge"
                     style="height: 300px;"></div>
              </div>
              <div class="salesEchartsIitem">
                <div id="salesEchartsIncome"
                     ref="salesEchartsIncome"
                     style="height: 300px;"></div>
              </div>
              <div class="salesEchartsIitem">
                <div id="salesEchartsSex"
                     ref="salesEchartsSex"
                     style="height: 300px;"></div>
              </div>
              <div class="salesEchartsIitem">
                <div id="salesEchartsEdution"
                     ref="salesEchartsEdution"
                     style="height: 300px;"></div>
              </div>
            </div>
            <div class="salesDataItem">
              <el-table :data="characterUser.listTrialSalePointData"
                        border
                        stripe
                        class="setHeight boederSet saleTitleColor"
                        style="width: 100%;">
                <el-table-column prop="startTime"
                                 label="时间"
                                 width="150">
                </el-table-column>
                <el-table-column prop="flowCount"
                                 label="流量(人)"
                                 width="150">
                </el-table-column>
                <el-table-column prop="purchaseNumber"
                                 label="已购人数(人)"
                                 width="150">
                </el-table-column>
                <el-table-column prop="noPurchaseNumber"
                                 label="未购人数(人)"
                                 width="150">
                </el-table-column>
                <el-table-column prop="salesCount"
                                 label="销量(件)">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="detail-content-item siteInformation"
               v-show="radioDetailSwitch == '现场信息'">
            <p style="font-weight:bold;color:#333;">主题描述<span style="font-weight:bold;color:#fec63c;">{{currInfo.themeNumber}}</span>条，图片<span style="font-weight:bold;color:#fec63c;">{{currInfo.imageNumber}}</span>张，视频<span style="font-weight:bold;color:#fec63c;">{{currInfo.videoNumber}}</span>个</p>
            <slider v-if="radioDetailSwitch == '现场信息'"
                    v-for="(item,index) in currInfo.list"
                    :key="index"
                    :theme="item"
                    :index="index"></slider>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as opreate from 'api/getData'
import slider from '../../slider/slider'
import img from "../../../../../images/marketSale/video.png"
export default {
  name: "sale-detail",
  props: {
    showdialog: {
      type: Boolean,
      required: true,
      default: false
    },
    trialSalePoint: {
      type: Object,
      required: true,
      default () {
        return {}
      }
    }
  },
  components: {
    slider
  },
  data () {
    return {
      theme: [],
      visible: this.showdialog,
      radioDetailSwitch: '基本信息',
      feedBackParam: {
        feedbackCrowd: '全部',
        problemType: '全部'
      },
      flag: true,
      toPushData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }],
      saleBaseInfo: {},
      saleBackDetail: {},
      listTrialSaleFeedback: [],
      saleProbDetail: [],
      saleEchartsDetail: [],
      characterUser: {},
      currInfo: {}
    }
  },
  mounted () {

  },
  methods: {
    obtainBaseInfo (newVal) {
      opreate.getSaleBaseDetail(newVal).then(res => {
        this.saleBaseInfo = res.data || {}
      })
    },
    getCurrImg (newVal) {
      opreate.getCurrentImg({ trialSalePointId: newVal.trialSalePointId }).then(res => {
        res.data.list.map(item => {
          item.img = [], item.vd = []
          if (item.imageUrl) {
            item.img = item.imageUrl.split(';')
          }
          if (item.videoUrl) {
            item.vd = item.videoUrl.split(';')
          }
        })
        this.currInfo = res.data
      })
    },
    getSaleUserFeatureCount (newVal) {
      opreate.saleUserFeatureCount({ trialSalePointId: newVal.trialSalePointId }).then(res => {
        this.characterUser = res.data || {}
        if (this.radioDetailSwitch == '销售数据/用户特征') {
          this.renderSalesDataEcharts(this.characterUser)
        }
      }).catch(err => console.error(err))
    },
    obtainBackInfo (newVal) {
      opreate.getSaleBackDetail(Object.assign(this.feedBackParam, { trialSalePointId: newVal.trialSalePointId })).then(res => {
        if (res.data) {
          let { customNumber, listTop, listTrialSaleFeedback, userNumber } = res.data
          this.saleProbDetail = listTrialSaleFeedback
          this.saleBackDetail = { customNumber, userNumber }
          this.saleEchartsDetail = listTop
          this.listTrialSaleFeedback = listTrialSaleFeedback
          if (this.radioDetailSwitch == '问题反馈') {
            this.renderBackItemEcharts(listTop)
          }
        }
      }).catch(err => console.error(err))
    },
    feedbackCrowdChange (feedbackCrowd) {
      this.feedBackParam.problemType = "全部"
      if (feedbackCrowd == '全部') {
        this.listTrialSaleFeedback = this.saleProbDetail
      } else {
        this.listTrialSaleFeedback = this.saleProbDetail.filter(v => {
          return v.feedbackCrowd == feedbackCrowd
        })
      }
    },
    problemTypeChange (problemType) {
      if (this.feedBackParam.feedbackCrowd == "全部") {
        if (problemType == "全部") {
          this.listTrialSaleFeedback = this.saleProbDetail
        } else {
          this.listTrialSaleFeedback = this.saleProbDetail.filter(v => {
            return v.problemType == problemType
          })
        }
      } else {
        if (problemType == "全部") {
          this.listTrialSaleFeedback = this.saleProbDetail.filter(v => {
            return v.feedbackCrowd == this.feedBackParam.feedbackCrowd
          })
        } else {
          this.listTrialSaleFeedback = this.saleProbDetail.filter(v => {
            return v.feedbackCrowd == this.feedBackParam.feedbackCrowd
          }).filter(v => {
            return v.problemType == problemType
          })
        }
      }
    },
    renderBackItemEcharts (listTop) {
      let itemECharts = this.$echarts.init(document.getElementById("feedBackItemEcharts"))
      if (listTop.length > 0) {
        let option = {
          title: {
            text: '问题反馈类型排名Top10',
            textStyle: {
              fontSize: '14'
            }

          },
          grid: {
            left: '12%',
            right: '3%',
            bottom: '10%',
            top: 30
          },
          yAxis: [{
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              fontSize: 14,
            },
            type: 'category',
            position: 'left',
            data: listTop.map(v => v.problemType)
          }],
          xAxis: [{
            show: false,
            axisTick: {
              show: false
            },
            type: 'value',
            axisLine: {
              show: false
            }
          }],
          series: [
            {
              name: '指标',
              type: 'bar',
              data: listTop.map(v => v.number),
              barWidth: 10,
              barGap: 0,
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  textStyle: {
                    color: '#a8aab0',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                  },
                },
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 1, color: 'rgba(127, 128, 225, 0.7)'
                  }, {
                    offset: 0, color: 'rgba(104, 253, 255, 0.7)'
                  }], false),
                },
              }
            }
          ]
        };
        itemECharts.setOption(option)
      } else {
        itemECharts.clear()
      }
    },
    renderSalesDataEcharts (renderSale) {
      let salesEchartsAge = this.$echarts.init(this.$refs.salesEchartsAge)
      let salesEchartsIncome = this.$echarts.init(this.$refs.salesEchartsIncome)
      let salesEchartsSex = this.$echarts.init(this.$refs.salesEchartsSex)
      let salesEchartsEdution = this.$echarts.init(this.$refs.salesEchartsEdution)
      let listAgeArea = this.dataEchartsSolve('年龄段', renderSale.listAgeArea, 'ageAreaName', 'ageNumber')
      let listIcome = this.dataEchartsSolve('收入', renderSale.listIcome, 'icomeAreaName', 'incomeNumber')
      let listGender = this.dataEchartsSolve('性别', renderSale.listGender, 'genderName', 'genderNumber')
      let listEducation = this.dataEchartsSolve('教育程度', renderSale.listEducation, 'educationName', 'deucationNumber')
      listAgeArea ? salesEchartsAge.setOption(listAgeArea) : salesEchartsAge.clear()
      listIcome ? salesEchartsIncome.setOption(listIcome) : salesEchartsAge.clear()
      listGender ? salesEchartsSex.setOption(listGender) : salesEchartsAge.clear()
      listEducation ? salesEchartsEdution.setOption(listEducation) : salesEchartsAge.clear()
    },

    dataEchartsSolve (title, dataEcharts, indexName, indexVal) {
      let unitSet = title.includes('年龄') ? '岁' : ''
      if (dataEcharts && dataEcharts.length > 0) {
        let option = {
          title: {
            text: title,
            textStyle: {
              fontSize: '18px'
            },
            x: 'center',
            bottom: 10
          },
          color: ['#e57373', '#64B5F6', '#9575CD'],
          series: [
            {
              name: title,
              type: 'pie',
              minAngle: 6,
              avoidLabelOverlap: true,
              radius: '43%',
              center: ['50%', '50%'],
              data: dataEcharts.map(v => {
                return {
                  name: v[indexName] === '65以上' ? `${v[indexName]}` : `${v[indexName]}${unitSet}`,
                  value: `${v[indexVal]}`
                }
              }),
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'outside',
                    formatter: function (params) {
                      return params.name + '\n{white|' + params.value + '人}';
                    },
                    rich: { white: { align: 'center', padding: [3, 0] } }
                  }
                }
              }
            }
          ]
        }
        return option
      } else {
        return null
      }
    }
  },
  watch: {
    showdialog (visible) {
      if (visible) {
        this.obtainBaseInfo(this.trialSalePoint)
        this.obtainBackInfo(this.trialSalePoint)
        this.getSaleUserFeatureCount(this.trialSalePoint)
        this.visible = visible
        this.getCurrImg(this.trialSalePoint)

      }
    },
    radioDetailSwitch (newVal) {
      if (newVal == '问题反馈') {
        this.$nextTick(() => {
          this.renderBackItemEcharts(this.saleEchartsDetail)
        })
      }
      if (this.radioDetailSwitch == '销售数据/用户特征') {
        this.$nextTick(() => {
          this.renderSalesDataEcharts(this.characterUser)
        })
      }
      if (this.radioDetailSwitch == '现场信息') {
        this.$nextTick(() => {
        })
      }
    }
  }
}
</script>

<style scoped>
/**
  * @desc: This is Note
  * 详情CSS/detail-dialog-contain
  * @author: coulis
  * @date: 2018/10/26 11:26:58
  */
.detail-dialog-content {
  display: flex;
  flex-direction: column;
}
.detail-dialog-content-item {
}
.lineHeight {
  line-height: 30px;
}
.detailColorSet {
  color: #fec63c;
  font-weight: bold;
}

/**
* @desc: This is Note
* 基本信息CSS/basic-information
* @author: coulis
* @date: 2018/10/26 11:26:58
*/
.basic-information {
  display: flex;
  flex-direction: column;
}
.basicInformationItem {
}
.basicInfoItem {
  display: flex;
}
.basicInformationItem + .basicInformationItem {
  border-top: 1px solid #e0ef8f;
}
.titleLeft {
  width: 80px;
  text-align: right;
  margin-right: 12px;
}
.basicInfoContent {
  display: flex;
  flex: 1;
}
.basicInfoContentItem {
  padding-right: 40px;
}
.contRightSetItem {
  padding-right: 40px;
}
.sexSet {
  margin-right: 20px;
}
.titleRightItemContainer {
  display: flex;
  flex-wrap: wrap;
}
.materielItem {
  display: flex;
  align-items: center;
}
.materielItem {
  padding-right: 10px;
}
.materielItemImg {
  width: 18px;
  height: 18px;
}

/**
  * @desc: This is Note
  * 问题反馈CSS
  * @author: coulis
  * @date: 2018/10/30 20:49:38
  */
.feedBack {
  display: flex;
  flex-direction: column;
}
.feedBackNum {
  height: 40px;
  line-height: 40px;
}
.feedBackItemTable {
  display: flex;
  flex-direction: column;
}
.feedBackTableParam {
  margin-bottom: 12px;
}

/**
  * @desc: This is Note
  * 销售数据/用户特征CSS
  * @author: WJ
  * @date: 2018/10/31 10:28:59
  **/
.salesDataTitle {
  display: flex;
  justify-content: space-between;
}
.salesDataEcharts {
  display: flex;
  flex-wrap: wrap;
  margin: 12px 0px;
}
.salesEchartsIitem {
  width: 50%;
  color: #212121;
}
/* TODO:fix表头颜色 */
.el-table th > .cell {
  color: #212121;
}
.el-table thead {
  color: #212121;
}
.el-radio,
.el-table th {
  color: #212121;
}
</style>
